initMap();
          
async function initMap() {
    var map = new BMapGL.Map("container"); // 创建地图实例
    var point = new BMapGL.Point(102.5978, 25.05093); // 创建地理坐标点
    map.centerAndZoom(point, 12); // map.centerAndZoom('昆明', 10); 
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放

    // 添加控件
    addMapControls(map);

    // 创建并添加折线和标注
    createPolylineAndMarkers(map, 102.53431, 25.07477, 102.56899, 25.08601);
    createPolylineAndMarkers(map, 102.56899, 25.08601, 102.56114, 25.09941);
    createPolylineAndMarkers(map, 102.56114, 25.09941, 102.6, 25.04);
    createPolylineAndMarkers(map, 102.6, 25.04, 102.77266, 24.98638);
    createPolylineAndMarkers(map, 102.77266, 24.98638, 102.55375, 25.10926);
    createPolylineAndMarkers(map, 102.6, 25.04, 102.56865, 25.11180);
    createPolylineAndMarkers(map, 102.56865, 25.11180, 102.57857,  25.11284);
    createPolylineAndMarkers(map, 102.56865, 25.11180, 102.53400, 25.07163);
    createPolylineAndMarkers(map, 102.53400, 25.07163, 102.55040,  25.11944);
    createPolylineAndMarkers(map, 102.55040,  25.11944, 102.66667, 24.98736);
    createPolylineAndMarkers(map, 102.55040,  25.11944, 102.54275,  25.12213);
    createPolylineAndMarkers(map, 102.54275,  25.12213, 102.54308,  25.12131);
    createPolylineAndMarkers(map, 102.54275,  25.12213, 102.53617,  25.13415);
    createPolylineAndMarkers(map, 102.53617,  25.13415, 102.54773,  25.13298);
    createPolylineAndMarkers(map, 102.54773,  25.13298, 102.53945,  25.13925);
    createPolylineAndMarkers(map, 102.53945,  25.13925, 102.69538,  25.00203);
    createPolylineAndMarkers(map, 102.69538,  25.00203, 102.55267,  25.15104);
    createPolylineAndMarkers(map, 102.56114, 25.09941, 102.56745,  25.10632);
    createPolylineAndMarkers(map, 102.56745,  25.10632, 102.58673,  25.1319);
    createPolylineAndMarkers(map, 102.58673,  25.1319, 102.57737,  25.10110);
    createPolylineAndMarkers(map, 102.57737,  25.10110, 102.55825,  25.11630);
    createPolylineAndMarkers(map, 102.55825,  25.11630,102.62453,  25.10402);
    createPolylineAndMarkers(map, 102.55825,  25.11630, 102.69849, 25.04522);
    createPolylineAndMarkers(map, 102.55825,  25.11630, 102.61001, 25.09618);
    createPolylineAndMarkers(map, 102.55825,  25.11630, 102.64268, 25.09551);
    createPolylineAndMarkers(map, 102.64268, 25.09551, 102.63150, 25.09801);
    //不监听点击事件
    // map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    // var address = await getPosition(point);
    // // 创建点标记
    // var marker = new BMapGL.Marker(point, {
    //     enableDragging: true
    // });
    // var opts = {
    //     width : 250,  // 信息窗口宽度
    //     height: 100,  // 信息窗口高度
    // }
    // // 创建图文信息窗口
    // var sContent = getContent(point, address);
    // // 在地图上添加点标记
    // map.addOverlay(marker)
    // // 创建信息窗口对象
    // var infoWindow = new BMapGL.InfoWindow(sContent, opts);
    // // 打开信息窗口
    // marker.openInfoWindow(infoWindow);
    

    // map.addEventListener('click', async function(e) {
    //     console.log(e)
    //     console.log('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
    //     var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
    //     console.log('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    //     map.clearOverlays();
    //     // 获取点击点的坐标
    //     var { lng, lat } = e.latlng;
    //     var point = new BMapGL.Point(lng, lat); // 创建地理坐标点
    //     var address = await getPosition(point);
    
    //     // 创建标注对象
    //     var marker = new BMapGL.Marker(point, {
    //         enableDragging: true
    //     });
    //     // 将标注添加到地图上
    //     map.addOverlay(marker);
    //     console.log('address222', address)
    //     sContent = getContent(point, address);
    //     // 创建信息窗口对象
    //     var infoWindow = new BMapGL.InfoWindow(sContent, opts);
    //     // 打开信息窗口
    //     marker.openInfoWindow(infoWindow);
    // });
}

function addMapControls(map) {
    const scaleCtrl = new BMapGL.ScaleControl();  
    map.addControl(scaleCtrl);
    const zoomCtrl = new BMapGL.ZoomControl();  
    map.addControl(zoomCtrl);
}

function createPolylineAndMarkers(map, lng1, lat1, lng2, lat2) {
    var point1 = new BMapGL.Point(lng1, lat1);
    var point2 = new BMapGL.Point(lng2, lat2);
    var polyline = new BMapGL.Polyline([point1, point2], {
        strokeColor: "blue", 
        strokeWeight: 5, 
        strokeOpacity: 0.5
    });
    map.addOverlay(polyline); 

    var marker1 = new BMapGL.Marker(point1);
    var marker2 = new BMapGL.Marker(point2);
    map.addOverlay(marker1);
    map.addOverlay(marker2);
}

// 处理地址解析异步操作
function getPosition(point) {
    return new Promise((resolve, reject) => {
    let geoc = new BMapGL.Geocoder(); // // 处理地址解析和逆解析
    geoc.getLocation(point, (result) => {
        let addr = result.addressComponents;
        var full_address = addr.province + addr.city + addr.district + addr.street + addr.streetNumber;
        return resolve(full_address);
    });
    });
}

function getContent(point, address) {
    return `<div style='padding-left:10px'>
    经度: ${point.lng}<br>
    纬度: ${point.lat}<br>
    地址: ${address}</div>`;
}
